<template>
  <div class="the-header">
    <div class="header-logo" @click="goHome">
      <svg class="icon">
        <use xlink:href="#icon-erji"></use>
      </svg>
      <span>music</span>
    </div>
    <ul class="navbar">
      <li :class="{active:item.name == activeName}" v-for="item in navMsg" @click="goPage(item.path,item.name)">
        {{item.name}}
      </li>
      <li>
        <div class="header-search">
          <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords"></input>
          <div class="search-btn" @click="goSearch()">
            <svg class="icon">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
          </div>
        </div>
      </li>
      <li v-show="!loginIn" :class="{active: item.name == activeName}" v-for="item in loginMsg" :key="item.path" @click="goPage(item.path,item.name)">
        {{item.name}}
      </li>
    </ul>
    <div class="header-right" v-show="loginIn">
      <div id="user">
        <img :src="attachImageUrl(avator)">
      </div>
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)">
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {navMsg,loginMsg,menuList} from '../assets/data/header'
  export default {
    name: 'TheHeader',
    data(){
      return{
        navMsg:[],     //导航栏
        loginMsg: [],  //右侧导航栏
        keywords:'',   //搜索关键字
        menuList:[]   //用户下拉菜单
      }
    },
    computed:{
      ...mapGetters([
        'activeName',
        'loginIn',
        'avator'
      ])
    },
    methods:{
      //提示信息
      notify(title,type) {
        this.$notify({
          title: title,
          type: type
        })
      },
      goMenuList(path){
        if(path == 0){
          this.$store.commit('setLoginIn',false)
          this.$store.commit('setIsActive',false)
          this.$router.go(0)
        }else {
          this.$router.push({path:path})
        }
      },
      //  获取图片地址
      attachImageUrl(srcUrl){
        return srcUrl?this.$store.state.configure.HOST+srcUrl:'../assets/img/user.jpg'
      },
      goHome(){
        this.$router.push({path:'/'})
        this.$store.commit('setActiveName',false)
      },
      goPage(path,name){
        if(!this.loginIn && path =='/my-music'){
          this.notify("请先登录",'warning')
        }else{
          this.$store.commit('setActiveName',name)
          this.$router.push({path:path})
        }
      },
      goSearch(){
        this.$router.push({path:'/search',query:{keywords:this.keywords}})
      },
    },

    created(){
      this.navMsg = navMsg
      this.loginMsg = loginMsg;
      this.menuList = menuList
    },
    //点击头像，弹出菜单
    mounted(){
      document.querySelector("#user").addEventListener('click',function (e) {
        document.querySelector(".menu").classList.add("show")
        e.stopPropagation()
      },false)

      document.querySelector(".menu").addEventListener('click',function (e) {
        e.stopPropagation()
      })
      document.addEventListener('click',function () {
        document.querySelector('.menu').classList.remove('show')
      },false)
    }
  }
</script>

<style scoped lang="scss">
@import "../assets/css/the-header.scss";
</style>
